背景画像をウィンドウ全体に表示する
今回は、ホームページのウィンドウ全体に背景画像を表示させるテクニックを紹介します。通常、背景に指定した画像は縦横に繰り返して表示されますが、このテクニックを使うと、ウィンドウ全体に背景画像を1枚の絵として表示することができます。 サンプルページ

→ ページ左、ページ上の余白を0にする
 
まずは、ホームページの左側と上部の余白を0にします。この操作は、BODYタグにleftmargin属性とtopmargin属性を追加し、それぞれの値に"0"を指定すると実行できます。
<BODY leftmargin="0" topmargin="0">


→ 背景用の画像をレイヤーで配置する
 
続いて、背景用の画像をIMGタグで配置します。このとき、width属性とheight属性に"100%"を指定し、ウィンドウ全体に画像を表示させてください。さらに、この画像を背景画像として機能させるために、position:absoluteのスタイルシートを指定してレイヤー化する必要があります。レイヤーの表示位置は、左、上とも0ピクセルの位置(top:0px; left:0px)、重ねる順番は1番目とします(z-index:1)。
<BODY leftmargin="0" topmargin="0">
<IMG src="back.jpg" width="100%" height="100%"
style="position:absolute; top:0px; left:0px; z-index:1">
 


→ ページに表示する内容をレイヤーで配置する
 
これでウィンドウ全体に背景画像を表示することができました。あとはページの内容をHTMLで記述するだけです。ただし、この記述もレイヤー化し、背景画像の上に重ねて配置しなければいけません。そこでページ内容全体をDIVタグで挟み、position:absoluteのスタイルシートを指定します。また、左と上に適当な余白を設け(top:10px; left:10px)、背景画像の上に表示されるように重ねる順番を2番目にします(z-index:2)。これでウィンドウ全体に背景画像を1枚の絵として表示することができます。
<BODY leftmargin="0" topmargin="0">
<IMG src="back.jpg" width="100%" height="100%"
style="position:absolute; top:0px; left:0px; z-index:1">
<DIV style="position:absolute; top:10px; left:10px; z-index:2">
   :
(ページに表示する内容)
   :
</DIV>
サンプルページ


yVoC[UNLIMIT1~] ECir|C Yahoo yV LINEf[^[z500~`I


z[y[W NWbgJ[h COiq O~yz COsI COze